<template>
  <view class="settings-container">
	  <!-- 动态雪花 Canvas -->
	  <canvas canvas-id="snow-canvas" class="snow-canvas" />
    <view class="card">
      <view class="avatar-box">
        <text class="label">头像</text>
        <image class="avatar animated" :src="userInfo.avatar" @click="changeAvatar" />
      </view>

      <view class="form-item">
        <text class="label">昵称</text>
        <input class="input" v-model="userInfo.nickname" placeholder="请输入昵称" />
      </view>

      <view class="form-item">
        <text class="label">手机号</text>
        <text class="value">{{ userInfo.phone }}</text>
      </view>

      <view class="form-item">
        <text class="label">学校</text>
        <picker :range="schoolList" @change="onSchoolChange">
          <view class="picker">{{ userInfo.school || '请选择学校' }}</view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">性别</text>
        <radio-group @change="onGenderChange" class="radio-group">
          <label v-for="item in genderList" :key="item.value" class="radio-label">
            <radio :value="item.value" :checked="userInfo.gender === item.value" />
            {{ item.label }}
          </label>
        </radio-group>
      </view>

      <view class="form-item">
        <text class="label">匿名模式</text>
        <switch :checked="userInfo.anonymous" @change="e => userInfo.anonymous = e.detail.value" />
      </view>
    </view>

    <button class="btn save-btn animated" @click="save">✨ 保存设置 ✨</button>
    <button class="btn logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'https://cdn.pixabay.com/photo/2023/01/28/avatar.jpg',
        nickname: '小新',
        phone: '188****8888',
        school: '',
        gender: '',
        anonymous: false
      },
      schoolList: [
        '清华大学', '北京大学', '复旦大学', '浙江大学',
        '四川大学', '重庆大学', '中山大学', '山东大学'
      ],
      genderList: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: '保密', value: 'secret' }
      ]
    };
  },
  
  onReady() {
    this.initSnowEffect();
  },

  methods: {
	 initSnowEffect() {
	    const ctx = uni.createCanvasContext('snow-canvas', this);
	    const snowflakes = [];
	
	    // 初始化雪花数据
	    for (let i = 0; i < 30; i++) {
	      snowflakes.push({
	        x: Math.random() * 375,
	        y: Math.random() * 667,
	        r: Math.random() * 3 + 2,
	        d: Math.random() * 2 + 1
	      });
	    }
	
	    const draw = () => {
	      ctx.clearRect(0, 0, 375, 667);
	      ctx.setFillStyle('rgba(255,255,255,0.8)');
	      ctx.beginPath();
	      snowflakes.forEach(flake => {
	        ctx.moveTo(flake.x, flake.y);
	        ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2);
	      });
	      ctx.fill();
	
	      // 更新雪花位置
	      snowflakes.forEach(flake => {
	        flake.y += flake.d;
	        flake.x += Math.sin(flake.y / 20) * 0.6;
	        if (flake.y > 667) {
	          flake.y = 0;
	          flake.x = Math.random() * 375;
	        }
	      });
	
	      ctx.draw();
	      // #ifdef H5
	      requestAnimationFrame(draw);
	      // #endif
	      // #ifdef MP-WEIXIN
	      setTimeout(draw, 1000 / 60);
	      // #endif
	    };
	
	    draw();
	  },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: res => {
          this.userInfo.avatar = res.tempFilePaths[0];
        }
      });
    },
    onSchoolChange(e) {
      this.userInfo.school = this.schoolList[e.detail.value];
    },
    onGenderChange(e) {
      this.userInfo.gender = e.detail.value;
    },
    save() {
      uni.showToast({ title: '保存成功', icon: 'success' });
    },
    logout() {
      uni.clearStorage();
      uni.reLaunch({ url: '/pages/login/index' });
    }
  }
};
</script>

<style scoped>
	.snow-canvas {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: 0; /* 在最底层 */
	  pointer-events: none;
	}

@keyframes scaleUp {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes rotateIn {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.settings-container {
  padding: 40rpx 20rpx;
  background: linear-gradient(180deg, #e0f7fa 0%, #ffffff 100%);
  min-height: 100vh;
}

.card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  animation: scaleUp 2s ease infinite;
}

.avatar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #a7ffeb;
  animation: rotateIn 3s infinite ease-in-out;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.label {
  color: #333;
  font-size: 30rpx;
  font-weight: 500;
}

.input, .picker, .value {
  font-size: 28rpx;
  color: #666;
  text-align: right;
  flex: 1;
}

.radio-group {
  display: flex;
  gap: 30rpx;
  justify-content: flex-end;
}

.radio-label {
  font-size: 26rpx;
}

.btn {
  width: 100%;
  padding: 24rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
  text-align: center;
  margin-top: 40rpx;
}

.save-btn {
  background: linear-gradient(90deg, #4dd0e1, #00bcd4);
  color: #fff;
  animation: scaleUp 3s ease-in-out infinite;
}

.logout-btn {
  background: #ffcdd2;
  color: #c62828;
}
</style>
